*{margin: 0;padding: 0;}
body{
	/*overflow-y: hidden;*/
}
.main{display: flex;font-family: '楷体';flex-wrap: wrap;overflow-y: hidden;}
.main a{
	display: block;
	text-decoration: none;
}
.item{
	flex: 1;
	height: 100vh;
	text-align: center;
	line-height: 115vh;
	font-size: 2.25em;
	color: #fff;
	position: relative;
	background-position: center 45%;
	background-repeat: no-repeat;
	background-size: 95%;
}
.item:after{
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.2s;
	background-color: rgba(0,0,0,0.5);
}
span{
	display: none;
	animation: span 0.2s;
}
.item:hover span{
	display: block;
}
.item.zbl{
	background-color: #25799b;
	background-image: url(../images/ZBLbg.png);
}
.item.zbl:hover{
	background-image: url(../images/ZBL.png);
}
.item.syz{
	background-image: url(../images/SYZbg.png);
	background-color: #01ea1c;
}
.item.syz:hover{
	background-image: url(../images/SYZ.png);
}
.item.shy{
	background-color: #F8D6E7;
	background-image: url(../images/SHYbg.png);
}
.item.shy:hover{
	background-image: url(../images/SHY.png);
}
.item.cth{
	background-color: #f5dd23;
	background-image: url(../images/CTHbg.png);
}
.item.cth:hover{
	background-image: url(../images/CTH.png);
}
.item.gyg{
	background-color: #11abb0;
	background-image: url(../images/GYGbg.png);
}
.item.gyg:hover{
	background-color: #11abb0;
	background-image: url(../images/GYG.png);
}
.item.hyq{
	background-color: #7a7a7a;
	background-image: url(../images/HYQbg.png);
}
.item.hyq:hover{
	background-image: url(../images/HYQ.png);
}
.item.hyx{
	background-color: #cb576c;
	background-image: url(../images/HYXbg.png);
}
.item.hyx:hover{
	background-image: url(../images/HYX.png);
}
.item:hover:after{
	background-color: transparent;
}
.shy:last-of-type{
	display: none;
}
.hed{
	display: none;
}

@keyframes span {
	0%{
		opacity: 0;
	    -webkit-transform: scale(0);
	    transform: scale(0);
	}
	100% {
	    opacity: 100;
	    -webkit-transform: scale(1);
	    transform: scale(1);
	}
}



@media (max-width: 998px){
	.main{
		overflow: hidden;
	}
	.hed{
		display: block;
		position: fixed;
		top: 0;
		left: 50%;
		text-align: center;
		transform: translateX(-50%);
	}
	.item:after{
		display: none;
	}
	.btn{
		width: 50px;
		height: 50px;
		background-image: url(../images/icon.png);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center;
		display: inline-block;
	}
	.btn:active{
		box-shadow: none;
		transform: translateY(2px);
	}
	nav ul{
		display: flex;
		flex-wrap: wrap;
		height: 0;
		overflow: hidden;
		transition: 0.4s;
		margin-top: -4px;
	}
	nav ul li{
		list-style: none;
		flex: 0 0 100%;
		font-size: 1rem;
		line-height: 28px;
		color: #fff;
		background-color: rgba(0,0,0,0.1);
	}
	.item{
		flex: 0 0 100%;
		height: 50vh;
		background-size: 50%;
    	background-position: center;
	}
	.item.shy{background-image: url(../images/SHY.png);}
	.item.hyx{background-image: url(../images/HYX.png);}
	.item.gyg{background-image: url(../images/GYG.png);}
	.item.zbl{background-image: url(../images/ZBL.png);}
	.item.cth{background-image: url(../images/CTH.png);}
	.item.syz{background-image: url(../images/SYZ.png);}
	.item.hyq{background-image: url(../images/HYQ.png);}
}